<template>
  <div class="route-page">
    <a-card
        title="支付配置"
        class="card-with-title-page"
        size="small"
        :bordered="false"
        style="width: 100%"
    >
      <template #extra>
        <a-button type="primary" @click="newConfiguration">新增配置</a-button>
      </template>
      <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="id"
          :loading="loading"
          :scroll="{ x: 'max-content' }"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'status'">
            <a-switch
                :checkedValue="1"
                :unCheckedValue="0"
                :checked="record.status"
                checked-children="开启"
                un-checked-children="关闭"
                @click="(checked) => handleStatusClick(record.id, checked)"
            />
          </template>
          <template v-if="column.key === 'tagsBuild'">
            <span>
              <a-tag
                  style="margin: 3px"
                  v-for="(tag, index) of record.build_name_arr"
                  :key="index"
              >
                {{ tag }}
              </a-tag>
            </span>
          </template>
          <template v-if="column.key === 'tagsEnvironment'">
            <span>
              <a-tag
                  style="margin: 3px"
                  v-for="(tag, index) of record.pay_env_txt_arr"
                  :key="index"
              >
                {{ tag }}
              </a-tag>
            </span>
          </template>
          <template v-if="column.key=='account'">
            <span>{{ record?.company_name }}</span>
            <span>-</span>
            <span>{{ record?.account_name }}</span>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="accessEdit(text)">编辑</a-button>
            <a-button type="link" style="color: red" @click="accessDele(text)"
            >删除
            </a-button
            >
          </template>
        </template>
      </a-table>
    </a-card>
    <!-- 编辑 -->
    <EditPayment
        :visible="visibleEdit"
        :id="accessId"
        @clear="clearBtn"
        @submitBtn="submitBtn"
    />

    <!-- 绑定业务 -->
    <EditBusiness
        :visible="editBusinessVisible"
        :id="editBusinessId"
        @onClose="editBusinessClose"
        @success="editBusinessSuccess"
    />
  </div>
</template>

<script>
import {message} from "ant-design-vue";
import {computed, defineComponent, ref, watch} from "vue";
import request from "../../../common/utils/request";
import utils from "../../../common/utils/utils";
import store from "../../../store/index";
import EditPayment from "./modules/EditPayment.vue";
import EditBusiness from "./modules/EditBusiness.vue";

export default defineComponent({
  name: "PaymentSetting",
  components: {EditPayment, EditBusiness},
  setup() {
    const dataSource = ref([]);
    const page = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: pageSize.value,
      showSizeChanger: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      pageSize.value = pager.pageSize;
    };
    // 状态
    const switchType = ref(true);
    const visibleEdit = ref(false);
    const accessId = ref(0);
    const accessEdit = (id) => {
      visibleEdit.value = true;
      accessId.value = id;
    };
    const clearBtn = () => {
      visibleEdit.value = false;
      accessId.value = null;
    };
    const submitBtn = () => {
      visibleEdit.value = false;
      configList();
    };
    // 删除
    const accessDele = (id) => {
      console.log(id);
      utils.modalConfirm({
        content: "删除后将丢失该配置，确认要删除吗？",
        okType: "danger",
        centered: true,
        onOk: () => {
          request.del("/pay", "/org/pay/config", {id}).then((res) => {
            message.success(res.msg || "删除成功");
            configList();
          });
        },
      });
    };
    // 添加
    const newConfiguration = () => {
      visibleEdit.value = true;
      accessId.value = 0;
    };

    // 状态
    const handleStatusClick = (id, checked) => {
      request
          .put("/pay", "/org/pay/config/status", {
            id,
            status: checked,
            needMsg: true,
          })
          .then((res) => {
            message.success(res.msg || "修改成功");
            configList();
          });
    };
    const loading = ref(false);
    // 列表
    const configList = () => {
      loading.value = true;
      request
          .get("/pay", "/org/pay/config", {
            page: page.value,
            pageSize: pageSize.value,
          })
          .then((res) => {
            dataSource.value = res.list;
            total.value = Number(res.total);
          })
          .finally(() => {
            loading.value = false;
          });
    };
    configList();

    watch([page, pageSize], () => {
      configList();
    });

    const columns = computed(() => {
      if (
          store.getters.orgInfo &&
          store.getters.orgInfo.org_type &&
          store.getters.orgInfo.org_type == "workAi"
      ) {
        return [
          {
            title: "配置名称",
            dataIndex: "name",
            width: 120,
          },
          {
            title: "支付方式",
            dataIndex: "pay_method_txt",
            width: 120,
          },
          {
            title: "支付通道",
            dataIndex: "pay_sdk_txt",
            width: 120,
          },
          {
            title: "使用环境",
            dataIndex: "tagsEnvironment",
            key: "tagsEnvironment",
            width: 240,
          },
          {
            title: "状态",
            dataIndex: "status",
            key: "status",
            width: 100,
          },
          {
            title: "操作",
            dataIndex: "id",
            key: "action",
            fixed: "right",
            width: 120,
          },
        ];
      } else {
        return [
          {
            title: "配置名称",
            dataIndex: "name",
            width: 120,
          },
          {
            title: "所属公司账户",
            key: "account",
            width: 150,
          },
          {
            title: "支付方式",
            dataIndex: "pay_method_txt",
            width: 120,
          },
          {
            title: "支付通道",
            dataIndex: "pay_sdk_txt",
            width: 120,
          },
          {
            title: "使用环境",
            dataIndex: "tagsEnvironment",
            key: "tagsEnvironment",
            width: 240,
          },
          {
            title: "状态",
            dataIndex: "status",
            key: "status",
            width: 100,
          },
          {
            title: "操作",
            dataIndex: "id",
            key: "action",
            fixed: "right",
            width: 120,
          },
        ];
      }
    });

    const editBusinessVisible = ref(false);
    const editBusinessId = ref(0);

    const bindBusinessClick = (id) => {
      editBusinessId.value = id;
      editBusinessVisible.value = true;
    };

    const editBusinessClose = () => {
      editBusinessVisible.value = false;
    };

    const editBusinessSuccess = () => {
      editBusinessClose();
    };
    return {
      handleStatusClick,
      newConfiguration,
      dataSource,
      columns,
      pagination,
      handleTableChange,
      accessDele,
      accessEdit,
      visibleEdit,
      accessId,
      clearBtn,
      submitBtn,
      switchType,
      loading,

      editBusinessVisible,
      editBusinessClose,
      editBusinessSuccess,
      editBusinessId,
      bindBusinessClick,
    };
  },
});
</script>

<style lang="less" scoped></style>
